<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>一元夺宝充值</title>
    <link rel="stylesheet" href="../asset/aui/css/aui.2.0.css">
    <link rel="stylesheet" href="../asset/mall/css/common.css">
    <link rel="stylesheet" href="../asset/mall/css/recharge.css">
</head>
<body>
<div id="aui-header">
    <div class="hs">
        <header class="aui-bar aui-bar-nav header-red">
            <a class="aui-pull-left aui-btn">
                <span class="aui-iconfont aui-icon-left"></span>我的
            </a>
            <div class="aui-title">充值</div>
        </header>
    </div>
</div>
<div class="notice">
    参与活动最少为一人次，对应金额为一元，充值款项仅用于参与活动，且不可退换！
</div>
<p class="recharge-label">选择充值金额</p>
<div class="choose-money">
    <span class="active">20</span>
    <span>50</span>
    <span>100</span>
    <span>200</span>
    <span>500</span>
    <span>其他金额</span>
</div>
<p class="recharge-label">选择支付方式</p>
<div class="recharge-way">
    <ul class="aui-list">
        <li class="aui-list-item">
            <label>
                <img src="../asset/mall/image/wx-icon.png"/>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        微信支付
                        <p>推荐安装微信5.0及以上版本的使用</p>
                    </div>
                    <div class="aui-list-item-right">
                        <input type="radio" class="aui-radio" name="choose-money">
                    </div>
                </div>
            </label>
        </li>
        <li class="aui-list-item">
            <label>
                <img src="../asset/mall/image/zfb-icon.png"/>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        支付宝支付
                        <p>推荐有支付宝账户的用户使用</p>
                    </div>
                    <div class="aui-list-item-right">
                        <input type="radio" class="aui-radio" name="choose-money">
                    </div>
                </div>
            </label>
        </li>
    </ul>
</div>

<button class="recharge-btn" onclick="recharge();">确认支付</button>


<script type="text/javascript" src="../asset/vue.js"></script>
<script type="text/javascript" src="../asset/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="../asset/aui/script/api.js"></script>
<script type="text/javascript" src="../asset/mall/js/common.js"></script>

<script>
    $('.choose-money span').bind('touchstart', function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active');
        } else {
            $(this).addClass('active').siblings().removeClass('active');
        }
    });

    function recharge() {
        if(!$('.choose-money span').hasClass('active')){
            alert('请选择充值金额');
            return false;
        }
        if(!$('input:radio[name="choose-money"]').is(":checked")){
            alert('请选择支付方式');
            return false;
        }
        alert('跳转到支付');

    }

</script>
</body>
</html>
